<template>
  <div class="app-container page" ref="homeScroll" @scroll="handleScroll">
    <div class="top-content">
      <div class="my-tabs">
        <div class="tabs-item" :class="{ active: activeTabs === 1 }" @click="changeTabs(1)">
          <p>选品中心</p>
          <span>可选商品{{ total }}</span>
        </div>
      </div>
      <div class="form-box">
        <!-- 搜索条件表单 -->
        <div class="params-form" :class="{ active: showSelect }">
          <el-form :model="postData.form" label-width="auto">
            <el-form-item label="在售价">
              <div class="space"><el-input v-model="postData.form.minPrice" />-<el-input v-model="postData.form.maxPrice" /></div>
            </el-form-item>
            <!-- <el-form-item label="上线同款" >
              <el-select clearable v-model="postData.form.minPrice" placeholder="请选择" >
                <el-option
                  v-for="item in toRaw(store.getDict('3'))"
                  :key="item.dictCode"
                  :label="item.dictLabel"
                  :value="item.dictCode"
                ></el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="是否定制">
              <el-select clearable v-model="postData.form.customType" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in toRaw(store.getDict('shop_product_custom_type'))"
                  :key="item.dictCode"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="商品风格">
              <el-select clearable v-model="postData.form.productStyle" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in toRaw(store.getDict('shop_product_style'))"
                  :key="item.dictCode"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item label="供应品类">
              <el-select clearable v-model="postData.form.minPrice" placeholder="请选择" >
                <el-option
                  v-for="item in toRaw(store.getDict('3'))"
                  :key="item.dictCode"
                  :label="item.dictLabel"
                  :value="item.dictCode"
                ></el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="是否模型">
              <el-select clearable v-model="postData.form.isModel" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in toRaw(store.getDict('shop_is_model'))"
                  :key="item.dictCode"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="运营区域">
              <el-cascader
                v-model="postData.form.areaId"
                :options="area"
                :props="{
                  expandTrigger: 'hover',
                  value: 'cityCode',
                  label: 'name'
                }"
                style="width: 100%"
              />
              <!-- <el-select clearable v-model="postData.form.minPrice" placeholder="请选择">
                <el-option
                  v-for="item in toRaw(store.getDict('3'))"
                  :key="item.dictCode"
                  :label="item.dictLabel"
                  :value="item.dictCode"
                ></el-option>
              </el-select> -->
            </el-form-item>
            <el-form-item label="市场定位">
              <el-select clearable v-model="postData.form.factoryGrade" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in toRaw(store.getDict('shop_product_factory_grade'))"
                  :key="item.dictCode"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>

            <!-- <el-form-item label="城市销量">
              <div class="city-sale-input" @click="areaDrawer = true">
                <div class="sale-item mr10" v-for="item in _checkedAreaList" :key="item.id">
                  <p class="text-over f12">{{ item.name }}</p>
                  <el-icon class="f12" @click.stop="delProvince(item.areaId)"><CloseBold /></el-icon>
                </div>
                <div class="sale-item" v-if="_checkedAreaList.length >= 2" style="width: 36px">
                  <p class="text-over f12" style="width: 36px">...</p>
                </div>
              </div>
            </el-form-item> -->
          </el-form>
          <div class="form-btn">
            <el-button type="primary" :icon="Search" @click="searchPage">查询</el-button>
            <el-button type="primary" :icon="RefreshRight" @click="resetPage" plain>重置</el-button>
          </div>
        </div>
      </div>
      <div class="search">
        <el-input
          v-model="postData.form.searchKey"
          @keydown.enter="getPageList"
          @clear="getPageList"
          style="width: 300px"
          placeholder="请输入类目名称搜索"
          clearable
        >
          <template #prefix>
            <el-icon class="el-input__icon">
              <search />
            </el-icon>
          </template>
        </el-input>
      </div>
    </div>

    <div class="bottom-content">
      <div class="tree-left">
        <div class="title">
          <div></div>
          <span>商品分类</span>
        </div>
        <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick">
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <span>{{ node.label }}</span>
              <span> ({{ data.publishNum }}) </span>
            </span>
          </template>
        </el-tree>
      </div>
      <div class="shops-right" :class="{ active: showSelect }">
        <div class="shop-box" v-for="(item, i) in shopList.shopList.value" :key="i" v-if="showOn" v-loading="loading">
          <div class="top">
            <div class="img-box">
              <img :src="item.mainPicUrl" alt="" />
            </div>
            <div class="top-left" v-if="item.factoryGrade !== null">
              {{ store.getDictName("sys_user_sex", item.factoryGrade) }}
            </div>
            <div class="bottom-box">
              <div class="go-time">上市时间：{{ item.appearTime }}</div>
              <div class="onsale">已售:{{ item.saleNum }}</div>
            </div>
          </div>
          <div class="bottom">
            <div class="header-title">{{ item.productName }}</div>
            <div class="header-price">
              <span>
                供应价 ¥ <span style="color: red">{{ item.factoryLowestPrice }}</span></span
              >
            </div>
            <div class="choose-shop">选购商家：{{ item.selectNum }}</div>
            <div class="area" @click="changeMask(i, item)">
              <div class="area-font">
                <div>运营区域：</div>
                <div class="area-box" v-for="(items, a) in item.productAreaList" v-show="a < 1" :key="a">
                  {{ items.sname }}({{ items.collected_num }})
                </div>
              </div>
              <div class="area-button">
                <el-icon color="#86909C"> <MoreFilled /> </el-icon
                ><el-icon color="#86909C">
                  <CaretTop />
                </el-icon>
              </div>
            </div>
            <MaskBox
              ref="childRef"
              v-model:maskNum="maskNum"
              :num="i"
              @changeMasks="changeMasksd"
              :productId="productId"
            ></MaskBox>
          </div>
        </div>
        <div v-else style="display: flex; justify-content: center; width: 100%">
          <el-empty description="暂无数据" />
        </div>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        v-model:current-page="postData.form.page"
        v-model:page-size="postData.form.size"
        :page-sizes="[12, 24, 48, 96]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </div>
    <!-- 城市销量筛选抽屉 -->
    <el-drawer
      v-model="areaDrawer"
      :size="800"
      :with-header="false"
      modal-class="area-drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <div class="area-container">
        <div class="left">
          <div class="area-title">城市销量筛选</div>
          <div class="search-input">
            <el-input placeholder="请输入关键词" :suffix-icon="Search" />
          </div>
          <div class="arae">
            <el-scrollbar>
              <div class="province">
                <div
                  :class="{ 'province-acive': active.id == item.id }"
                  v-for="item in area"
                  :key="item.id"
                  @click="activeProvince(item)"
                >
                  {{ item.name }}
                </div>
              </div>
            </el-scrollbar>
            <el-scrollbar>
              <el-tree
                ref="areaRef"
                :data="active.children"
                :props="{ label: 'name' }"
                show-checkbox
                node-key="id"
                @check="checkChange"
              />
            </el-scrollbar>
          </div>
        </div>
        <el-divider direction="vertical" />
        <div class="right">
          <div class="right-title">已选字段</div>
          <div class="right-list">
            <el-scrollbar>
              <div v-for="item in checkedAreaList" :key="item.areaId">
                <div class="province">
                  {{ item.name || item.areaName
                  }}<el-icon>
                    <DeleteFilled @click="delProvince(item.areaId)" />
                  </el-icon>
                </div>
                <div class="city" v-for="city in item.children" :key="city.areaId">
                  <div>
                    {{ city.name || city.areaName }}
                    <el-icon>
                      <CloseBold @click="delCity(item.areaId, city.areaId)" />
                    </el-icon>
                  </div>
                  <div v-for="area in city.children" class="area" :key="area.areaId">
                    {{ area.name || area.areaName }}
                    <div>
                      <el-icon>
                        <CloseBold @click="delArea(item.areaId, city.areaId, area.areaId)" />
                      </el-icon>
                    </div>
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
          <div class="area-btn">
            <el-button @click="areaDrawer = false">取消</el-button>
            <el-button type="primary" @click="confirmSaveArea">保存</el-button>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import MaskBox from "./components/MaskBox.vue";
import { ref, toRaw, onMounted } from "vue";
import { debounce } from "./untils/debounce";
import { RefreshRight, Search, CloseBold } from "@element-plus/icons-vue";
import { size, template } from "lodash";
import useCodeArrStore from "../../../store/modules/select";
import { storeToRefs } from "pinia";
import { getCategoryList, getSelectPage } from "@/api/products/selection";
import { getArea } from "@/api/tenant";

const activeTabs = ref(1);
const loading = ref(true);
const productId = ref("");

//城市销量筛选
const area = ref([]);
const areaRef = ref();
const active = ref("");
const checkedAreaList = ref([]);
const _checkedAreaList = ref([]); //回显使用
const areaDrawer = ref(false);
/**
 * 切换省
 */
const activeProvince = item => {
  active.value = { ...item };
  setAreaTreeKsys(getAreaId(checkedAreaList.value));
};
/**
 * 设置树型选择
 */
const setAreaTreeKsys = keys => {
  if (!areaRef.value) return;
  areaRef.value.setCheckedKeys(keys);
};
/**
 * 递归获取所有子地区id
 */
const getAreaId = tree => {
  let arr = [];
  const getId = tree => {
    tree.forEach(item => {
      if (item.children && item.children.length > 0) {
        getId(item.children);
      } else {
        arr.push(item.areaId || item.id);
      }
    });
  };
  getId(tree);
  return arr;
};
/**
 * 地区选项发生改变的回调
 */
const checkChange = () => {
  if (areaRef.value.getCheckedKeys().length == 0) {
    // 当前树没有节点选中时
    checkedAreaList.value = checkedAreaList.value.filter(v => v.id != active.value.id);
    return;
  } else {
    const keys = areaRef.value.getCheckedKeys();
    const children = filterTree(active.value.children, keys, mapArea(checkedAreaList.value));
    const index = checkedAreaList.value.findIndex(v => v.id == active.value.id || v.areaId == active.value.id);
    if (index == -1) {
      checkedAreaList.value.push({ ...active.value, areaId: active.value.id, areaName: active.value.name, children });
    } else {
      checkedAreaList.value[index].children = children;
    }
  }
};
/**
 * 根据id数组递归筛选节点,组成选中的树
 */
function filterTree(tree, keys, nums) {
  if (!tree?.length) return [];
  let arr = [];
  for (let index = 0; index < tree.length; index++) {
    const planNum = nums.filter(item => item.areaId == tree[index].id)[0]?.planNum;
    const areaId = tree[index].areaId ? tree[index].areaId : tree[index].id;
    const id = tree[index].id == areaId ? null : tree[index].id;
    if (tree[index].children && tree[index].children.length) {
      if (filterTree(tree[index].children, keys, nums).length > 0) {
        arr.push({
          ...tree[index],
          children: [...filterTree(tree[index].children, keys, nums)],
          areaId,
          id
        });
      }
    } else if (keys.includes(tree[index].id)) {
      arr.push({
        ...tree[index],
        planNum,
        areaId,
        id
      });
    }
  }
  return arr;
}
/**
 * 递归筛选出选中的属性
 */
const mapArea = tree => {
  let arr = [];
  const getAreaNum = tree => {
    tree.forEach(item => {
      if (item.children && item.children.length) {
        getAreaNum(item.children);
      } else {
        arr.push({ planNum: item.planNum, areaId: item.areaId });
      }
    });
  };
  if (tree) getAreaNum(tree);
  return arr;
};
/**
 * 删除省
 */
const delProvince = provinceId => {
  checkedAreaList.value = checkedAreaList.value.filter(province => province.areaId != provinceId);
  _checkedAreaList.value = checkedAreaList.value;
  setAreaTreeKsys(getAreaId(checkedAreaList.value));
};
/**
 * 删除市
 */
const delCity = (provinceId, cityId) => {
  checkedAreaList.value.forEach(province => {
    if (province.areaId == provinceId) {
      province.children = province.children.filter(city => city.areaId != cityId);
    }
    if (province.children.length == 0) {
      checkedAreaList.value = checkedAreaList.value.filter(province => province.areaId != provinceId);
    }
  });
  setAreaTreeKsys(getAreaId(checkedAreaList.value));
};
/**
 * 删除地区选项
 */
const delArea = (provinceId, cityId, areaId) => {
  checkedAreaList.value.forEach(province => {
    console.log(province.areaId, provinceId);
    if (province.areaId == provinceId) {
      province.children.forEach(city => {
        if (city.areaId == cityId) {
          city.children = city.children.filter(area => area.areaId != areaId);
        }
        if (city.children.length == 0) {
          province.children = province.children?.filter(city => city.areaId != cityId);
        }
      });
      if (province.children.length == 0) {
        checkedAreaList.value = checkedAreaList.value?.filter(province => province.areaId != provinceId);
      }
    }
  });
  setAreaTreeKsys(getAreaId(checkedAreaList.value));
};
/**
 * 保存地区
 */
const confirmSaveArea = () => {
  _checkedAreaList.value = checkedAreaList.value.slice(0, 2);
  areaDrawer.value = false;
  console.log("保存地区===", checkedAreaList.value);
};

//=======================================================================================================================

//树形结构控制
const shopList = reactive({
  shopList: []
});
const showOn = ref(false);
console.log("shopList", shopList.shopList.value);
const total = ref(0);
const store = useCodeArrStore();
const postData = reactive({
  form: {
    page: 1,
    size: 12
  }
});
const defaultProps = {
  children: "children",
  label: "name",
  numB: "publishNum"
};
const handleNodeClick = data => {
  postData.form.categoryId = data.categoryId;
  getPageList();
};
const changeTabs = index => {
  activeTabs.value = index;
};

//页面数据
const getPageList = async () => {
  loading.value = true;
  await getSelectPage(
    toRaw({ ...postData.form, areaId: postData.form.areaId ? Number(postData.form.areaId[postData.form.areaId.length - 1]) : "" })
  )
    .then(res => {
      loading.value = false;
      total.value = res.data.total;
      if (res.data.records.length === 0) {
        showOn.value = false;
      } else {
        showOn.value = true;
      }
      shopList.shopList.value = res.data.records;
    })
    .catch(error => {
      loading.value = false;
    });
};
onMounted(() => {
  //进页面第一次获取
  getTree();
  getPageList();
});

// 树形结构数据
const treeData = ref([]);
const getTree = () => {
  getCategoryList(toRaw(postData.form)).then(res => {
    treeData.value = res.data;
  });
};

//监听滚动
const showSelect = ref(false);
const scollNum = ref(0);
const handleScroll = debounce(event => {
  // 获取滚动位置
  const currentScrollTop = event.target.scrollTop;
  const distance = currentScrollTop - scollNum.value;
  // 处理distance，比如更新data或者做其他操作
  scollNum.value = currentScrollTop;
  const scrollTop = document.querySelector(".page").scrollTop;
  if (scrollTop > 160) {
    showSelect.value = true;
  }
  if (scrollTop == 0) {
    showSelect.value = false;
  }
}, 100);
onMounted(() => {
  const container = document.querySelector(".page");
  container.addEventListener("scroll", handleScroll);

  //获取省市区
  getArea().then(res => {
    area.value = res.data;
  });
});

onUnmounted(() => {
  const container = document.querySelector(".page");
  container.removeEventListener("scroll", handleScroll);
});
//调用子组件方法获取区域
const childRef = ref(null);
const setLayout = (i, id) => {
  childRef.value[i].getOperateAreaLists(id);
};
const maskNum = ref(-92);
const changeMask = (num, item) => {
  console.log(item, item.productId);
  maskNum.value = num;
  productId.value = item.productId;
  setLayout(num, item.productId);
};
const changeMasksd = () => {
  maskNum.value = -1;
};
//页面请求
const searchPage = () => {
  getPageList();
};
const handleSizeChange = val => {
  // console.log(`${val} items per page`)
  postData.form.size = val;
  getPageList();
};
const handleCurrentChange = val => {
  // console.log(`current page: ${val}`)
  postData.form.page = val;
  getPageList();
};
//重置
const resetPage = () => {
  postData.form = {
    page: 1,
    size: 12
  };
  getPageList();
};
</script>

<style lang="scss">
.area-drawer {
  .el-drawer__body {
    padding: 0;
  }
}

.area-drawer,
.classify-drawer {
  .el-drawer.rtl {
    border-radius: 10px 0 0 10px;
  }
}

.area-drawer {
  .el-tree-node__content {
    height: 40px;
    background: #f4f6f8;
  }
}
</style>
<style lang="scss" scoped>
p {
  padding: 0;
  margin: 0;
}
@mixin flex-end {
  display: flex;
  justify-content: end;
}

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin flex-align {
  display: flex;
  align-items: center;
}
.text-over {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page {
  overflow-y: scroll;
  padding: 0;
  height: 85vh;
  position: relative;

  //城市销量筛选
  .city-sale-input {
    min-height: 32px;
    // box-shadow: 0 0 0 1px #dedfe6 inset;
    border: 1px solid #dedfe6;
    border-radius: 4px;
    padding: 3px 11px;
    background-color: white;
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .sale-item {
      display: flex;
      align-items: center;
      width: 72px;
      color: #86909c;
      height: 24px;
      line-height: 24px;
      border-radius: 4px;
      border: 1px solid #f0f0f0;
      padding: 0 7px;
      p {
        width: 60px;
      }
      .el-icon {
        cursor: pointer;
        &:hover {
          color: #409eff;
        }
      }
    }
  }
  .area-container {
    height: 100%;
    display: flex;

    .el-divider {
      margin: unset;
    }

    .left,
    .right {
      flex: 1;
    }

    > div {
      height: 100%;
    }

    .left {
      padding: 20px 20px 0 0;

      .search-input {
        margin: 12px 0;
        padding: 0 20px;
      }

      .area-title {
        padding: 0 20px;
      }

      .arae {
        height: calc(100% - 77px);
        display: flex;

        .city,
        .province {
          font-size: 14px;

          > div {
            height: 40px;
            line-height: 40px;
          }
        }

        .city-item {
          padding-left: 20px;
        }

        .province {
          width: 150px;

          > div {
            padding-left: 20px;
          }

          .province-acive {
            color: #007dff;
            background: #f4f6f8;
          }
        }

        .el-scrollbar:nth-child(2) {
          flex: 1;
          background: #f4f6f8;
        }
      }
    }

    .right {
      padding: 20px;

      .right-title {
        margin-top: 36px;
        color: #4e5969;
        font-size: 14px;
      }

      .right-list {
        height: calc(100% - 100px);

        .province {
          height: 40px;
          background: #f4f6f8;
          @include flex-align;
          justify-content: space-between;
          padding: 0 10px;
          font-size: 14px;
          margin-top: 20px;

          .el-icon {
            color: #909399;
          }
        }

        .city {
          padding: 0 10px;
          font-size: 14px;

          > div {
            @include flex-align;
            justify-content: space-between;
            font-size: 12px;
            height: 40px;
          }

          .area {
            color: #86909c;

            > div {
              @include flex-align;
              gap: 14px;
            }
          }

          .el-input {
            width: 70px;
          }
        }
      }

      .area-btn {
        margin-top: 10px;
        @include flex-center;
      }
    }
  }

  .top-content {
    position: sticky;
    top: 0;
    padding: 20px;
    z-index: 2;
    background: #fff;
  }

  .my-tabs {
    display: flex;

    .tabs-item {
      width: 282px;
      padding: 10px 20px;
      // border: 1px solid #eee;
      border-bottom: none;
      border-radius: 12px 12px 0 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      background-color: #f5f7fa;
      cursor: pointer;
      font-size: 12px;
      color: #86909c;

      p {
        font-size: 16px;
        color: #131414;
        line-height: 24px;
        display: flex;
        justify-content: space-between;

        .el-tag {
          height: 20px;
        }
      }

      &:first-of-type {
        margin-right: 20px;
      }

      &.active {
        background-color: white;
        box-shadow: 0px -5px 16px 0px rgba(4, 19, 74, 0.04);
      }
    }
  }

  .form-box {
    background: #fff;
    padding: 20px;
  }
}

.search {
  padding-left: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #d8d8d8;
}

.bottom-content {
  display: flex;
  position: relative;

  .tree-left {
    position: fixed;
    padding: 10px;
    min-width: 300px;
    border-right: 1px solid #d8d8d8;

    .title {
      padding: 10px;
      display: flex;
      align-items: center;

      div:nth-child(1) {
        width: 6px;
        height: 6px;
        background: #409eff;
        border-radius: 50%;
        margin-right: 10px;
      }

      span:nth-child(2) {
        font-family:
          HarmonyOS Sans SC,
          HarmonyOS Sans SC;
        font-weight: 400;
        font-size: 18px;
        color: #131414;
        line-height: 24px;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }
  }

  .shops-right {
    background: #f8fafb;
    padding: 20px;
    display: flex;
    width: 100%;
    margin-left: 300px;
    flex-wrap: wrap;
    justify-content: flex-start;

    &.active {
      padding-top: 110px;
    }

    .shop-box {
      width: 294px;
      height: 400px;
      margin-right: 25px;
      overflow: hidden;
      margin-bottom: 20px;
      position: relative;
      background: #ffffff;
      box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
      border-radius: 10px 10px 10px 10px;

      .top {
        width: 294px;
        height: 200px;
        position: relative;
        font-family:
          Microsoft YaHei,
          Microsoft YaHei;
        font-weight: 400;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.75);
        line-height: 24px;
        text-align: left;
        font-style: normal;
        text-transform: none;

        .img-box {
          width: 100%;
          height: 100%;
          box-shadow: 4px 0px 4px 0px rgba(4, 19, 74, 0.1);
          border-radius: 10px 10px 10px 10px;

          img {
            width: 100%;
            box-shadow: 4px 0px 4px 0px rgba(4, 19, 74, 0.1);
            border-radius: 10px 10px 10px 10px;
            height: 100%;
          }
        }
        .top-left {
          position: absolute;
          top: 10px;
          left: 10px;
          width: 30px;
          height: 30px;
          background: rgba(0, 0, 0, 0.5);
          border: 1px solid #ffffff;
          border-radius: 50%;
          @include flex-center;
        }
        .bottom-box {
          position: absolute;
          bottom: 10px;
          display: flex;
          padding: 0 10px;
          align-items: center;
          justify-content: space-between;
          width: 100%;
        }
      }

      .bottom {
        padding: 20px 7px 0 12px;

        .header-title {
          font-family:
            Microsoft YaHei,
            Microsoft YaHei;
          font-weight: 700;
          min-height: 50px;
          font-size: 14px;
          color: #3d3d3d;
          margin-bottom: 12px;
          line-height: 24px;
          text-align: left;
          font-style: normal;
          text-transform: none;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          text-transform: none;
        }

        .header-price {
          font-family:
            Microsoft YaHei,
            Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          margin-bottom: 10px;
          color: #4e5969;
          line-height: 24px;
          text-align: left;
          font-style: normal;
          text-transform: none;

          span:nth-child(2) {
            color: red;
          }
        }

        .choose-shop {
          font-family:
            Microsoft YaHei,
            Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          margin-bottom: 10px;
          color: #4e5969;
          line-height: 24px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }

        .area {
          display: flex;
          align-items: center;
          cursor: pointer;
          justify-content: space-between;

          .area-font {
            font-family:
              PingFang SC,
              PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #86909c;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            display: flex;
            align-items: center;
            justify-content: center;

            .area-box {
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 4px 10px;
              background: #f2f3f5;
              border-radius: 4px 4px 4px 4px;
            }
          }

          .area-button {
            padding: 6px;
            @include flex-center;
            background: #f2f3f5;
            cursor: pointer;
            border-radius: 4px 4px 4px 4px;
          }
        }
      }
    }
  }
}

.params-form {
  background: #f6f8fa;
  margin-bottom: 10px;
  padding: 20px;
  position: relative;

  &.active {
    position: absolute;
    opacity: 0;
    top: 0;
    width: 1px;
    height: 1px;
  }

  ::v-deep(.el-form) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 76px;
  }

  .form-btn {
    @include flex-end;
  }

  .space {
    flex: 1;
    display: flex;
    gap: 10px;
  }
}

.pagination {
  margin-top: 20px;
  @include flex-end;
}

::v-deep(.is-error) {
  .tip {
    display: none;
  }
}

// 区域抽屉
.area-container {
  height: 100%;
  display: flex;

  .el-divider {
    margin: unset;
  }

  .left,
  .right {
    flex: 1;
    padding: 20px;
  }

  > div {
    height: 100%;
  }

  .left {
    .search-input {
      margin: 12px 0;
    }

    .arae {
      height: calc(100% - 57px);
      display: flex;

      .province {
        width: 120px;
      }

      .city {
        flex: 1;
        background: #f4f6f8;
        height: 100%;
      }
    }
  }
}
</style>
